import api from '@/api'
import { Menu } from '@/types/api'
import { useEffect, useRef, useState } from 'react'

import { Form, Input, Select, Button, Table, Space, Modal } from 'antd'
import { ColumnsType } from 'antd/es/table'
import { formatDate } from '@/utils'
import CreateMenu from './CreateMenu'
import { IAction } from '@/types/modal'
import { message } from '@/utils/AntdGlobal'
/*
 * @Description: 描述信息
 * @Version: 版本号
 * @Author: xuebao
 * @Date: 2023-12-13 10:04:19
 * @LastEditors: xuebao
 * @LastEditTime: 2023-12-13 10:48:21
 */
const MenuList = () => {
  const [data, setData] = useState<Menu.MenuItem[]>([])
  const [form] = Form.useForm()
  const menuRef = useRef<{
    open: (type: IAction, data?: Menu.EditParams | { parentId?: string; orderBy?: number }) => void
  }>()
  useEffect(() => {
    getMenuList()
  }, [])
  //获取菜单列表
  const getMenuList = async () => {
    const data = await api.getMenuList(form.getFieldsValue())
    setData(data)
  }
  //重置
  const handleReset = () => {
    form.resetFields()
    getMenuList()
  }

  const handleCreate = () => {
    menuRef.current?.open('create', {
      orderBy: data.length,
    })
  }
  const handleUpdate = (record: Menu.EditParams) => {
    menuRef.current?.open('edit', record)
  }
  const handleSubCreate = (record: Menu.MenuItem) => {
    menuRef.current?.open('create', { parentId: record._id, orderBy: record.children?.length })
  }
  const handleDeleteMenu = (record: Menu.MenuItem) => {
    let text = ''
    if (record.menuType == 1) text = '菜单'
    if (record.menuType == 2) text = '按钮'
    if (record.menuType == 3) text = '页面'

    Modal.confirm({
      title: '确认',
      content: `确认删除该${text}吗？'`,
      onOk() {
        handleDelSubmit(record._id)
      },
      okText: '确定',
      cancelText: '取消',
      onCancel() {},
    })
  }
  const handleDelSubmit = async (_id: string) => {
    await api.deleteMenu({
      _id,
    })
    message.success('删除成功')
    getMenuList() //调用列表
  }
  const columns: ColumnsType<Menu.MenuItem> = [
    {
      title: '菜单名称',
      dataIndex: 'menuName',
      key: 'menuName',
    },
    {
      title: '菜单图标',
      dataIndex: 'icon',
      key: 'icon',
    },
    {
      title: '菜单类型',
      dataIndex: 'menuType',
      render(menuType: number) {
        return {
          1: '菜单',
          2: '按钮',
          3: '页面',
        }[menuType]
      },
    },
    {
      title: '权限标识',
      dataIndex: 'menuCode',
      key: 'menuCode',
    },
    {
      title: '路由地址',
      dataIndex: 'path',
      key: 'path',
    },
    {
      title: '组件名称',
      dataIndex: 'component',
      key: 'component',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render(createTime: string) {
        return formatDate(createTime)
      },
    },
    {
      title: '操作',
      dataIndex: 'operation',
      render: (text, record) => {
        return (
          <Space>
            <Button type='text' onClick={() => handleSubCreate(record)}>
              新增
            </Button>
            <Button type='text' onClick={() => handleUpdate(record)}>
              编辑
            </Button>
            <Button type='text' danger onClick={() => handleDeleteMenu(record)}>
              删除
            </Button>
          </Space>
        )
      },
    },
  ]
  return (
    <div>
      <Form form={form} className='search-form' layout='inline' initialValues={{ menuState: 1 }}>
        <Form.Item name='menuName' label='菜单名称'>
          <Input placeholder='菜单名称' />
        </Form.Item>
        <Form.Item name='menuState' label='菜单状态'>
          <Select style={{ width: 120 }} placeholder='菜单状态'>
            <Select.Option value={1}>正常</Select.Option>
            <Select.Option value={2}>禁用</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Space>
            <Button type='primary' onClick={getMenuList}>
              查询
            </Button>
            <Button type='primary' onClick={handleReset}>
              重置
            </Button>
          </Space>
        </Form.Item>
      </Form>
      <div className='base-table'>
        <div className='header-wrapper'>
          <div className='title'>菜单列表</div>
          <div className='action'>
            <Button type='primary' onClick={handleCreate}>
              新增
            </Button>
          </div>
        </div>
        <Table bordered dataSource={data} columns={columns} rowKey='_id' />
        <CreateMenu mRef={menuRef} update={getMenuList} />
      </div>
    </div>
  )
}
export default MenuList
